<template>
    <div class="row">
        <div class="col" v-loading="loading" v-if="_teamdata.length">
            <TeamrunkVue v-bind="{ ...prop }" :Iteamdata="_teamdata" border></TeamrunkVue>
        </div>
        <el-empty class="col" v-if="!_teamdata.length"
            image="https://cdn.hterobot.com/JOY/oj_1_1/Not%20Found%20illustration.png" />

    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, ref, watch } from 'vue';
import { asyncranking } from '../../../api';
import TeamrunkVue from '../../../components/team/rank.vue'
import Studycodemodel from '../../../mysql_interface/studycodemodel';

const prop = defineProps<{ formdata: { teamid?: number, userid?: number, formdate: Date, todate: Date, }, data: Studycodemodel.Iteam }>()
const svg = ['#icon-rank_1', '#icon-rank_2', '#icon-rank_3']
onMounted(() => {
    start()
})

const _teamdata = ref<{ ID?: number, name?: string, ACcount?: number, df?: number, headportrait?: string }[]>([])


const loading = ref(false)
watch(() => prop.formdata, () => {
    start()
})

async function start() {
    if (prop.formdata.teamid) {
        loading.value = true
        try {
            const t = await asyncranking(prop.formdata)
            _teamdata.value = t.ACrank.map(e => {
                const user = t.user.find(z => z.ID === e.userid)
                return {
                    ...user,
                    ACcount: e.count,
                    df: Math.floor(Number(e.resultdataarrlength) / Number(e.resultdataarraclength) * 100),
                    ...e
                }
            })
        } catch (e) {
            // ElMessage.error('没有查询')
        }
        loading.value = false
    }
}

</script>
